<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex和grid布局对比</title>
</head>
<style>
h3{text-align: center;}
.box{
	width: 980px;
	min-height: 500px;
	background: lavender;
	border-radius: 10px;
	margin: 0 auto;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.cell{
	width: 200px;
	height: 120px;
	background: #7c9fb0;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 30px;
}

.container{
	width: 980px;
	background: lavender;
	border-radius: 10px;
	margin: 0 auto;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	padding: 30px;
	display: grid;
	/* grid-template-columns: 1fr 1fr 1fr 1fr; */
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
	/* grid-template-columns: 1fr 160px 1fr 1fr; */
	/* grid-template-columns: repeat(4, 150px); */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		/* 这种写法可以用来做响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。 */
	/* grid-template-columns: repeat(4, 1fr); */
	gap: 30px;
}
.item{
	height: 120px;
	background: #ffcf7f;
	border-radius: 8px;
	padding: 10px;
}
</style>
<body>
<p>grid布局详见教程：https://www.bilibili.com/video/BV1gw41167gh/?spm_id_from=333.788&vd_source=fe63836ffc9a65abffaaa3d8014e62dd</p>
<p>介绍几种常用的grid布局属性：https://blog.csdn.net/qq_18798149/article/details/133872183</p>
<h3>flex做网格布局</h3>
<div class="box">
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
	<div class="cell">单元格</div>
</div>

<h3 style="margin-top: 80px;">grid做网格布局</h3>
<div class="container">
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
	<div class="item">单元格</div>
</div>

</body>
</html>
